<template>
  <div style="background-color: #f5f6fa">
    <!-- <hear></hear> -->
    <BDhear :num="2"></BDhear>
    <div style="background-color: #ffffff">
      <div style="display: flex" class="order_details_box">
        <div style="flex: 1.5; padding: 30px; padding-top: 8px">
          <div style="">
            <div
              class="fl money cioasdasd"
              style="padding-top: 8px; margin-left: 0px"
            >
              <div style="color: #ff184e; font-size: 28px; font-weight: Bold">
                ￥{{ margin_amount }}
              </div>
            </div>
            <div style="padding-top: 8px; margin-left: 0px" class="font_style">
              标段编号：{{ bidding_name }}
            </div>
            <div style="padding-top: 8px; margin-left: 0px" class="font_style">
              标段名称：{{ bidding_project_name }}
            </div>
            <div
              v-if="toubiao"
              style="padding-top: 8px; margin-left: 0px"
              class="font_style"
            >
              开标时间：{{ bidder_notice_time }}
            </div>
            <div
              v-else
              style="padding-top: 8px; margin-left: 0px"
              class="font_style"
            >
              招标时间：{{ bid_begin_time | dateFormat }}——{{
                bid_end_time | dateFormat
              }}
            </div>
          </div>
        </div>
        <!-- <div v-if="toubiao" style="flex:1;font-size: 17px;display: flex; padding:30px;padding-top:8px;   padding-left: 10px;
    border-left: 3px solid #ffff;" >
        出函类型
   <div style="display: flex;
    align-items: center;">
          <el-radio v-model="radio1" label="1" border>电子保函</el-radio>
    <el-radio v-model="radio1" label="2" border>纸质保函</el-radio>
   </div>
      </div> -->
        <div
          style="
            flex: 1;
            font-size: 17px;
            display: flex;
            padding: 30px;
            padding-top: 8px;
            padding-left: 10px;
            border-left: 3px solid #ffff;
          "
        >
          业务员
          <div style="display: flex; align-items: center">
            <el-input
              @blur="yewuren"
              style="width: 100%"
              clearable
              v-model="xma_mobile"
              placeholder="请输入业务员"
            ></el-input>
          </div>
        </div>
      </div>
      <!-- <div class="fl money_box">
        <div class="bank_box" v-for="(item, index) in BankIconList" :key="index">
          <div class="bank_icon">
            <img style="  width: 194px;height: 194px;" src="../../assets/BidSecurity/bank_Icon.png" />
          </div>
          <div>{{item.guarantee_company_name}}</div>
          <div class="bank_btn">
            <el-button @click="getParams(item)">选择</el-button>
          </div>
        </div>
      </div> -->
      <div style="height: 780px; overflow: auto">
        <div class="c-div">
          <div
            :class="cutIndex == index ? 'app-cs' : 'app-c'"
            @click="handleMap(index, item)"
            v-for="(item, index) in BankIconList"
            :key="index"
          >
            <!-- <div class="c-div"> -->
            <img class="c-img" :src="item.guaranteeCompanyLogo" alt="" />
            <div class="c-txt">
              <div class="txt-1">{{ item.guaranteeCompanyName }}</div>
              <div class="txt-2">类型：{{ item.guaranteeCompanyType }}</div>
              <div class="txt-3">税率：{{ item.guaranteeCompanyRate }}</div>
              <!-- <div class="txt-4">{{ item.guarantee_company_desc }}</div> -->
            </div>
            <el-button
              style="margin-top: 0.75rem; width: 33%"
              type="primary"
              plain
              >选择</el-button
            >
          </div>
        </div>
      </div>
      <div style="margin-top: 77px; padding: 0 8%">
        <div style="width: 100%; margin-top: 2rem; height: 4rem">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-sizes="[8, 16, 24, 32]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="zongshu"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        class="publicDialog"
        title="当前选择"
        :visible.sync="ssdialogVisible"
        width="30%"
        :close-on-click-modal="false"
        v-dialogDrag
        custom-class="publicDialog"
        :before-close="handleClose"
      >
        <div>担保公司：{{ luoji.guaranteeCompanyName }}</div>
        <div v-if="toubiao">出函类型：{{ chuhtyle }}</div>
        <span slot="footer" class="dialog-footer footer">
          <el-button @click="ssdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="qweqw">确 定</el-button>
        </span>
      </el-dialog>
      <!-- <div class="bank_sataus">
        <el-button @click="SelectLot" class="bank_stauts_btn">上一步</el-button>
        <el-button @click="Submittals" class="bank_stauts_btn">下一步</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
// import hear from ".././../components/hear.vue";
import axios from "axios";
import BDhear from "./BDhear.vue";
import { getCompany, generate } from "@/api/financialInstitution";
export default {
  components: {
    // hear,
    BDhear,
  },
  name: "financialInstitution",
  data() {
    return {
      xma_mobile: "",
      BankIconList: [],
      tabPosition: "right",
      tab: "left",
      arr: [],
      ssdialogVisible: false,
      radio1: "2",
      zongarr: [],
      zongshu: 0,
      cutIndex: -1,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
      code: "",
      cion: {
        applyno: "",
        unify_code: "",
      },
      params: {
        pageSize: 10,
        pageNum: 1,
      },
      biddercode: "",
      biddername: "",
      contractId: "",
      bzjamount: "",
      baohanno: "",
      tijiao: {
        applyno: "",
        type: 1,
      },
      tang: false,
      zhang: false,
      toubiao: false,
      luoji: {},
      yewy: true,
      chuhtyle: "",
      imgName: "../../assets/login/tang1.png",
      bidding_name: sessionStorage.getItem("bidding_name"),
      bidding_project_name: sessionStorage.getItem("bidding_project_name"),
      margin_amount: sessionStorage.getItem("margin_amount"),
      bid_begin_time: sessionStorage.getItem("bid_begin_time"), //开标日期
      bid_end_time: sessionStorage.getItem("bid_end_time"), //截止时间
      bidder_notice_time: sessionStorage.getItem("bidder_notice_time"), //开标日期
    };
  },
  created() {
    console.log("12312", sessionStorage.getItem("bidder_notice_time"));
    if (sessionStorage.getItem("bhlein") == "投标保函") this.toubiao = true;
  },
  mounted() {
    this.get_Company();
  },
  methods: {
    yewuren() {
      // this.yewy = false;
      // return;
      axios({
        url: "http://192.168.0.28:8082/systeminfo/user/exists",
        // url: "http://192.168.0.28:8082/dagent/baohan/mobile_exists",
        method: "post",
        // params: '必须是一个无格式对象 query参数',
        data: {
          mobile: this.xma_mobile,
        },
        // timeout: 10000,
        headers: {
          Authorization: "Bearer " + sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data.code == 200) {
          sessionStorage.setItem("xma_mobile", this.xma_mobile);
          this.$message.success("业务员填写成功");
          this.yewy = false;
          // this.xastiao=true
          // this.open_buhege = false
          // this.opendsh = false;
        } else {
          this.$message.error(res.data.msg);
          // this.opendsh = false
        }
      });
    },
    handleClose(e) {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      // this.array.slice(val,6)

      this.arr = this.zongarr.slice(0, val);
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      console.log(`当前页: ${val}`);
      // this.arr=this.array.slice(val,6)
      var cion = (val - 1) * 6;
      this.arr = this.zongarr.slice(cion, cion + 6);
    },
    chuxian(e) {
      if (e == 1) {
        this.tang = true;
      } else {
        this.zhang = true;
      }
    },
    yincang(e) {
      if (e == 1) {
        this.tang = false;
      } else {
        this.zhang = false;
      }
    },
    async handleMap(state, i) {
      this.cutIndex = state;
      console.log("bianhao", i);
      this.cion.unify_code = i;
      this.getParams(i);
      this.params.typeid = sessionStorage.getItem("typeid");
      this.params.projectid = sessionStorage.getItem("proid");
      sessionStorage.setItem("guarantee_comid", i.guaranteeComid);
      this.params.companyid = i.guaranteeComid;
    },

    async project() {
      this.$notify({
        message: "请选择担保公司",
        type: "warning",
      });
    },
    getParams(item) {
      if (this.yewy) {
        this.$message({
          showClose: true,
          message: "请填写正确的业务员",
          type: "error",
        });
        return;
      }
      this.luoji = item;
      console.log(item);
      if (this.radio1 == "1") {
        this.chuhtyle = "电子保函";
      } else {
        this.chuhtyle = "纸质保函";
      }
      this.ssdialogVisible = true;
      // this.params.user_id = sessionStorage.getItem("user_id");
    },
    qweqw() {
      var item = this.luoji;
      // typeid申请保函类型id projectid申请保函项目id  companyid 没错
      sessionStorage.setItem(
        "guarantee_company_rate",
        item.guaranteeCompanyRate
      ); //保费
      this.params.typeid = sessionStorage.getItem("typeid");
      this.params.projectid = sessionStorage.getItem("proid");
      this.params.companyid = item.guaranteeComid;
      this.params.ga_code = 123456789;
      this.params.unify_code = sessionStorage.getItem("unify_code");
      this.params.apply_company_name =
        sessionStorage.getItem("apply_company_name");
      sessionStorage.setItem("guarantee_comid", item.guaranteeComid);
      this.Submittals(item);
    },
    SelectLot() {
      this.$router.push("/SelectLot");
    },
    Submittals(i) {
      console.log(this.params);

      // return;
      this.params.xma_mobile = this.xma_mobile;
      // return
      generate({
        // guaranteeApplyId:i.guaranteeComid,
        // guarantee:2,
        typeId: this.params.typeid,
        // projectId: 1173,
        projectId:this.params.projectid,
        gaCode: this.params.ga_code,
        unifyCode: this.params.unify_code,
        // unifyCode: this.params.unify_code || "91411300MA3X90JQ53",
        companyId: this.params.companyid,
        xmaMobile: this.xma_mobile,
        applyCompanyName: this.params.apply_company_name,
        // guaranteeComid:i.guaranteeComid,
        // guaranteeCompanyName:i.guaranteeCompanyName
      }).then((res) => {
        console.log("选择", res);
        if (res.data.code == 200) {
          sessionStorage.setItem(
            "guarantee_apply_id",
            res.data.data.guaranteeApplyId
          );
          sessionStorage.setItem("apply_number", res.data.data.applyNumber);
          //  sessionStorage.setItem("apply_number", res.data.data.apply_number);
          console.log(res.data.data);

          this.$message.success("提交成功");
          this.$router.push("/BidSecurity/Submission");

          // this.$router.push("/Submittals");
        } else {
          if (res.data.msg == "缺少必要参数xma_mobile") {
            this.$message({
              showClose: true,
              message: "请填写业务员",
              type: "error",
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
    get_Company() {
      getCompany(this.params).then((res) => {
        if (res.data.code == 200) {
          var casd = res.data.rows;
          this.zongshu = res.data.total;
          for (var i = 0; i < casd.length; i++) {
            if (casd[i].guaranteeCompanyLogo != null) {
              if (casd[i].guaranteeCompanyLogo.substr(0, 1) == "/") {
                casd[i].guaranteeCompanyLogo =
                  this.$baseUrl + casd[i].guaranteeCompanyLogo;
                // console.log(bbc[i].cardback);
              }
            }

            //    if (bbc[i].cardfront.substr(0, 1) == "/") {
            //   bbc[i].cardfront =
            //     this.$baseUrl + bbc[i].cardfront;
            //   console.log(bbc[i].cardfront);
            // }
          }
          this.BankIconList = casd;
        }
      });
    },
  },
};
</script>
<style>
.publicDialog .el-dialog__footer {
  padding: 0px !important ;
}
</style>
<style scoped>
.publicDialog {
  height: 400px !important;
}
.el-dialog__body {
  padding: 10px !important;
}
.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
  display: flex;
  justify-content: right;
}
html {
  width: 100vw;
  width: 100%;
  background: #eeee !important;
}
.asdding {
  position: fixed;
  right: 20px;
  bottom: 30%;
}
.asdzong {
  position: relative;
  width: 200px;
  background: #ffffff;
  display: flex;
  border: 1px #c5c5c5 solid;
  border-top: 3px tomato solid;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  padding-bottom: 20px;
}
.asdimgh {
  width: 60px;
  height: 60px;
}
.block {
  position: absolute;
  right: 100%;
}
.app {
  background: #eeeeee;
  /* padding: 0 20%; */
}
.cioasdasd {
  margin-top: 8px !important;
}
.app-xt {
  padding: 0 8%;
}
.app-h {
  padding-left: 1.6875rem;
  /* width: 100%; */
  height: 2.6875rem;
  line-height: 2.6875rem;
  background: #1890ff;
  font-size: 1.0625rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.erqiwu {
  height: 2.75rem;
  background: #069cff;
  border-radius: 0px 0px 0px 0px;
  font-size: 18px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app-a {
  display: flex;
  /* margin-top: 2.75rem; */
  position: relative;
}
.a-left {
  width: 50%;
  height: 3.0625rem;
  display: flex;
  line-height: 3.125rem;
  align-content: center;
  justify-content: center;
  background: #069cff;
  border: 0.0625rem solid #f0f3fb;
  border-right: 0;
  margin-top: 1px;
  border: 1px #069cff solid;
  /* border-radius: 0.5625rem 0rem 0rem 0.5625rem; */
  font-size: 17px;
  font-family: Microsoft YaHei;
  font-weight: 440;
  color: #ffffff;
}
.rihasd {
  color: #069cff;
}
.a-img {
  padding-top: 0.85rem;
  padding-right: 0.9375rem;
  width: 1.25rem;
  height: 1.3rem;
}
.aa-img {
  position: absolute;
  height: 48.96px;
  margin-top: 0.0625rem;
  padding: 0;
  left: 45%;
}
.a-right {
  margin-top: 1px;
  display: flex;
  align-content: center;
  justify-content: center;
  line-height: 3.125rem;
  width: 50%;
  height: 3.0625rem;
  /* background: #cdebff; */
  border: 1px #069cff solid;
  /* border-radius: 0.4375rem; */
  font-size: 17px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.app-b {
  margin-top: 3.8125rem;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-between;
}
.app-c {
  /* width: 44.9%; */
  /* flex: 1; */
  margin-right: 1%;
  margin-left: 1%;
  flex-direction: column;
  height: 354px;
  background: #ffffff;
  margin-top: 1.875rem;
  /* padding: 1.25rem; */
  display: flex;
  width: 23%;
  /* flex: 1; */
  margin-top: 1.875rem;
  /* padding: 1.25rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border: 0.0625rem solid #efefef;
  padding: 0 10px;
}
.app-cs {
  margin-right: 1%;
  margin-left: 1%;
  flex-direction: column;
  height: 354px;
  background: #ffffff;
  margin-top: 1.875rem;
  /* padding: 1.25rem; */
  display: flex;
  width: 23%;
  padding: 0 10px;
  /* flex: 1; */
  margin-top: 1.875rem;
  /* padding: 1.25rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  border: 0.0625rem solid #efefef;
  border: 1px solid #069cff;
  box-shadow: 0px 0px 6px 0px rgba(6, 156, 255, 0.4);
}
.app-b2 {
  display: flex;
  line-height: 1.5rem;
  font-size: 1rem;
  width: 48%;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  margin-bottom: 1.625rem;
}
.b-txt {
  width: 18.5rem;
  height: 1.7rem;
  flex: 1;
  background: #f3f3f3;
  border: 0.0625rem solid #dedede;
  padding-left: 0.375rem;
  line-height: 1.7rem;
  font-size: 14.5px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.c-img {
  width: 9.0625rem;
  height: 9.0625rem;
}
.c-txt {
  /* width: 56%; */
  /* padding: 0.525rem 0rem 1rem 1.5rem; */
}
.txt-1 {
  font-size: 1.0525rem;
  font-family: Microsoft YaHei;
  font-weight: 550;
  color: #333333;
  margin-top: 0.75rem;
}
.txt-2 {
  margin-top: 0.9625rem;
  font-size: 0.9rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.txt-3 {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.txt-4 {
  margin-top: 0.9375rem;
  font-size: 0.9rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  display: flex;
}
.c-div {
  /* margin-top: 1.25rem; */
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  /* height: 700px;
  overflow:auto; */
  /* justify-content: center; */
}
.butt {
  width: 100%;
  display: flex;
  justify-content: center;
}
.button-i {
  margin-bottom: 3rem;

  width: 20%;
  /* position: fixed; */
  bottom: 20%;
  /* height: 5.5%; */
  padding: 0.3125rem 0;
  line-height: 1.875rem;
  border-radius: 0.625rem;
  background: #069cff;
  text-align: center;
  font-size: 0.75rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fefefe;
}
</style>
<style scoped>
.bank_stauts_btn {
  width: 175px;
  height: 60px;
}

.bank_sataus {
  width: 370px;
  margin: 0px auto;
  padding-bottom: 30px;
}

.bank_btn button {
  width: 144px;
  height: 40px;
  /* position: relative;
  top: 0%;
  left: 0%; */
}

.bank_btn {
  position: relative;
  top: 7%;
  left: 26%;
}

.bank_icon {
  margin-top: 7px;
  position: relative;
  left: 19%;
  padding-top: 7px;
}

.bank_box {
  width: 320px;
  height: 311px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.money_box {
  width: 100%;
  height: 311px;
  padding: 0 5%;
  /* position: relative;
  left: 15%; */
  margin-top: 70px;
  /* top: 71px; */
  /* background: red; */
  display: flex;
  justify-content: space-between;
}

.money {
  align-items: center;
  margin-top: 28px;
  margin-left: 60px;
}

.font_style {
  font-size: 17px;
  color: #333333;
  font-size: Regular;
  /* margin-top: 28px; */
  margin-left: 60px;
}

.order_details_box {
  width: 100%;
  height: 200px;
  /* margin-top: 5%; */
  background-color: #f5f6fa;
  /* position: relative;
  left: 15%;
  top: 5%; */
}
</style>
